<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/recommendList.css">
    <link rel="stylesheet" href="./css/player.css">
    <script src="./assets/iconfont.js"></script>
</head>

<body>
    <div class="wrapper d-flex flex-column">
        <!-- 头部 -->
        <header class="header">
            <a href="#home">推荐页</a>
        </header>

        <!-- 中间 -->
        <section id="app" class="content">
            
        </section>

        <!-- 底部 -->
        <section class="player-control d-flex justify-content-start">
            <div class="player-control-songinfo d-flex justify-content-start">
                <!-- 歌曲信息 -->
                <div class="img">
                    <img src="" alt="">
                </div>
                <div class="songinfo d-flex flex-column justify-content-start">
                    <span class="songname"> 歌曲一 </span>
                    <span class="single-text-omitted singer">歌手23232323232</span>
                </div>
            </div>
            <div class="player-control-unit d-flex justify-content-between">
                <div class="control">
                    <!-- 播放控制 -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyiqu"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting1"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayiqu"></use>
                    </svg>
                </div>
                <div class="list">
                    <!-- 歌曲循环和列表 -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiaoxunhuan"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangliebiao"></use>
                    </svg>
                </div>
                <div class="d-flex justify-content-between">
                    <!-- 播放进度和音量 -->
                    <!-- 播放进度 -->
                    <div class="song-progress d-flex justify-content-between">
                        <span class="current-time">00:00</span>
                        <div class="progress" id="progress-bar">
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                        <span class="total-time">00:00</span>
                    </div>
                    <!-- 音量 -->
                    <div class="volume d-flex">
                        <svg class="volume-icon icon" aria-hidden="true">
                            <use xlink:href="#icon-yinliang"></use>
                        </svg>
                        <div class="progress" id="volume-bar">
                            <div class="progress-bar"></div>
                            <div class="progress-dot"></div>
                        </div>
                    </div>
                </div>

            </div>

        </section>
    </div>
    <audio src="" id="myAudio"></audio>

    <script src="./js/index.js" type="module"></script>
    <script src="./js/recommendList/recommendList.js" type="module"></script>
</body>

</html>